<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/resources/templates/base_template.xhtml">

        <ui:define name="body">

            <h:panelGrid columns="2" styleClass="cellaligntop">

                <p:dataTable id="datatable_jsId" value="#{serverDataModel}" var="user" widgetVar="datatableWidget"
                             scrollWidth="1000" scrollable="true" scrollHeight="364"
                             paginator="true" paginatorPosition="bottom" rows="15" lazy="true"
                             selectionMode="single" selection="#{serverDataModel.selectedUser}">

                    <p:ajax event="rowDblselect" 
                            update=":form:display" oncomplete="userDialog.show()" />

                    <p:column id="idColumn_jsId" headerText="ID" width="50" sortBy="#{user.id}">
                        <h:outputText value="#{user.id}"/>
                    </p:column>

                    <p:column id="firstNameColumn_jsId" headerText="First Name" width="120" sortBy="#{user.firstName}" filterBy="#{user.firstName}">
                        <h:outputText value="#{user.firstName}"/>
                    </p:column>

                    <p:column id="lastNameColumn_jsId" headerText="Last Name" width="120" sortBy="#{user.lastName}" filterBy="#{user.lastName}"> 
                        <h:outputText value="#{user.lastName}"/>
                    </p:column>

                    <p:column headerText="Street" width="200">
                        <h:outputText value="#{user.street}"/>
                    </p:column>

                    <p:column headerText="Home Number" width="200">
                        <h:outputText value="#{user.houseNum}"/>
                    </p:column>

                    <p:column id="cityColumn_jsId" headerText="City" width="200" sortBy="#{user.city}"
                              filterBy="#{user.city}" filterOptions="#{serverDataModel.filteredCities}">
                        <h:outputText value="#{user.city}"/>
                    </p:column>

                    <p:column headerText="ZIP Code" width="200">
                        <h:outputText value="#{user.zipCode}"/>
                    </p:column>

                    <p:column headerText="Phone" width="200">
                        <h:outputText value="#{user.phone}"/>
                    </p:column>

                    <p:column headerText="Mobile" width="200">
                        <h:outputText value="#{user.mobile}"/>
                    </p:column>

                    <p:column headerText="Fax" width="200">
                        <h:outputText value="#{user.fax}"/>
                    </p:column>

                    <p:column headerText="SSN" width="200">
                        <h:outputText value="#{user.ssn}"/>
                    </p:column>

                    <p:column headerText="Birth Date" width="200">
                        <h:outputText value="#{user.birthDate}">
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Hire Date" width="200">
                        <h:outputText value="#{user.hireDate}">
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Enabled" width="200">
                        <h:outputText value="#{user.enabled}"/>
                    </p:column>

                </p:dataTable>

                <p:panel header="Description" >
                    <p>Datatable with sorting, filtering and pagination implemented on database with lazy data model</p>
                    <p>Filter are case sensitive</p>
                    <p>Click on a row to select a user</p>
                    <p>double Click on a row to display a popup modal dialog</p>
                </p:panel>

                <p:dialog id="dialog" header="User Detail" widgetVar="userDialog" resizable="false" modal="true" width="200" height="100">  

                    <h:panelGrid id="display" columns="2" cellpadding="4">  

                        <h:outputText value="First Name : " />  
                        <h:outputText value="#{serverDataModel.selectedUser.firstName}" />  

                        <h:outputText value="Last Name : " />  
                        <h:outputText value="#{serverDataModel.selectedUser.lastName}" />  
                        
                    </h:panelGrid>  
                </p:dialog> 
            </h:panelGrid>

        </ui:define>

    </ui:composition>

</html>